<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画圆形
             2.画正三角形
        思路1：     html   div元素
		          css     倒角，必须有边框
		思路2：    html    div元素 #triangle
		          css      斜边
				           不设置宽高
						   左边框：50像素实线红色  transparent
						  右边框：50像素实线黄色   transparent
						    下边框：50像素实线蓝色、透明度.3
							颜色值：rgba(255,255,0,.3)
		 -->
	
	<style>
		/* 1.画圆*/
		div#circle{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			border-radius: 50%;
			/* 边框阴影属性  box-shadow属性*/
			box-shadow: 5px 5px 5px 5px red inset;
		}
	    /* 2.正三角形*/
	div#triangle{
		width: 0;
		/*
		border-left: 50px solid transparent;
		border-right:50px solid transparent;
		border-bottom: 50px solid rgba(0,0,255,.3);*/
		/* 两行：全部设置为透明色，上面的三角设置颜色 */
		border:50px solid transparent;
		border-top-color: rgba(0,0,255,.3);
	}
	input{
		outline:1px solid red;
		outline: 0;/*去掉边框效果，通配选择器中*/
	}
		
	</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>